{% extends 'base.html' %}
{% load mytags %}﻿​
{% load staticfiles %}
{% block title %}机架图{% endblock %}

{% block css %}
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .data-table {
            background: url('/static/cabinetmaps/table.gif') no-repeat;
            background-size: cover;
            padding: 50px;
            padding-top: 54px;
            width: 300px;
            border-collapse: initial;
        }

        .data-table tr, .data-table td, .data-table th {
            text-align: center;
            font-size: 0;
            height: 20px;
            border: 1px dashed #7e8996;
        }

        .timg {
            width: 100%;
            height: 20px;
            display: inline-block;
        }

        .u2server .timg {
            height: 40px;

        }

        .u4server .timg {
            height: 80px;

        }

        .rackname {
            font-size: 30px
        }

        .rack {
            float: left;
        }

        .racks {
            overflow: auto;
            padding-bottom: 10px
        }

        .tooltip-wrap {
            background: #fff;
            min-width: 100px;
            min-height: 100px;
            position: absolute;
            z-index: 99;
            border-radius: 3px;
            box-shadow: 0 0 1px
        }

        .hide {
            display: none
        }

        .select-btn {
            padding: 20px;

        }
    </style>
    <!-- DataTables -->
    <link rel="stylesheet" href="{% static 'bower_components/datatables.net-bs/css/dataTables.bootstrap.css' %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            机架图
            <small>cabinet maps</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li class="active">机架图</li>
        </ol>
    </section>

    <div class="select-btn">
        <label>
            <select id="area" name="area" class="btn btn-warning dropdown-toggle">
                <option value="">机柜列表</option>
                {% for area in area_all %}
                    {% ifequal area.id|int2str area_id %}
                        <option value="{{ area.id }}" selected> {{ area.name|slice:":20" }}</option>
                    {% else %}
                        <option value="{{ area.id }}"> {{ area.name|slice:":20" }}</option>
                    {% endifequal %}
                {% endfor %}
            </select>
        </label>
        <div class="col-sm-3" style="float:right;text-align: right;">
            <div class="input-group">
                <input type="text" class="form-control" id="search_input" name="keyword" value="{{ keyword }}"
                       placeholder="Search">
                <span class="input-group-btn"><button id='search_btn' type="button" class="btn btn-info btn-flat">
              - 搜索 -
        </button></span>
            </div>
        </div>
    </div>

    <div name="racks" class="racks">
        <div style="width: 2000px">






{#            {% for cabinet in cabinets %}#}
{##}
{#                <div name="{{ cabinet }}" class="rack">#}
{#                    <table class="data-table" id="data_table">#}
{##}
{#                        <tbody>#}
{#                        <tr>#}
{#                            <td><p class="rackname">{{ cabinet }}</p></td>#}
{#                        </tr>#}
{##}
{##}
{##}
                            {#        {{ line }}#}
{#                            <tr>#}
{#                                <td></td>#}
{#                            </tr>#}
{##}
{##}
{##}
{#                        <tr>#}
{#                            <td><img src="/static/cabinetmaps/blank.png" class="timg"></td>#}
{#                        </tr>#}
{##}
{#                        </tbody>#}
{#                    </table>#}
{#                </div>#}
{##}
{#            {% endfor %}#}






                    <!-- {% autoescape off %} -->

                    {{ rack_rail_template }}

                    <!-- {% endautoescape %} -->


            <div style="display: inline-block;width:  100px;height:  100px;"></div>
        </div>
    </div>
{% endblock %}



{% block script %}
    <!-- SlimScroll -->
    <script src="{% static 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'bower_components/fastclick/lib/fastclick.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <!-- page script -->
    <script type="text/javascript">

var Klass={

            init:function () {
                this.table = $('.data-table');

                this.initTable();
                this.initSelect();
                this.initToolTip();
            },
            initTable:function () {
                this.table.on('mouseover','[data-name="img"]',function() {

                    Klass.queryData($(this));


                }).on('mouseleave','[data-name="img"]',function() {
                    Klass.hideTooltip($(this));
                }).on('click','[data-name="img"]',function() {
                    window.location.href="{% url 'asset:assets' %}?id=" + $(this).attr("id")
                });
            },
            initToolTip:function () {
                $('body').on('mouseover','.tooltip-wrap',function () {

                    clearInterval(Klass.hideTimer);
                }).on('mouseleave','.tooltip-wrap',function () {

                    Klass.hideTooltip();
                });
            },
            queryData:function (dom) {
                //ajax请求
                $.getJSON('/cabinet/', {'id':dom.attr("id")}, function(data){
                  //成功后的回调函数
                  // console.log(data.message)
                  if(data.status == 'success'){
                    data = JSON.parse(data.message)[0];
                    Klass.getCorp(dom,data)

                  };
                })
            },
            showToolTip:function (dom,data,corp) {
                var _offset = dom.offset();
                var _width = dom.width();
                var _height = dom.height();
                var top = _offset.top;
                var left = _offset.left;
                if(!Klass.toolTipWrap){

                    Klass.toolTipWrap = $('<div class="tooltip-wrap"></div>')
                    $('body').append(Klass.toolTipWrap);
                }

                Klass.toolTipWrap.css(
                    {
                        top:top+'px',
                        left: left+_width+'px'
                    }
                );



                if(corp){
                    corp_name=corp.fields.name;
                } else {
                    corp_name="Null";
                }

                summary = "<p style='font-size: 18px'>"+data.fields.hostname+"</p>" +"<p>SN:&nbsp"+data.fields.sn+"<p>机架位置:&nbsp"+data.fields.railnum+"</p>"
                    {#+"<p>所属:&nbsp"+corp_name+"</p>"#}
                Klass.toolTipWrap.html(summary)
                clearInterval(this.hideTimer)
                Klass.toolTipWrap.removeClass('hide');

            },
            hideTooltip:function () {
                if(this.hideTimer){
                    clearInterval(this.hideTimer);
                }
                this.hideTimer = setTimeout(function () {
                    Klass.toolTipWrap.addClass('hide');
                },500)
            },
            initSelect:function(){
              $('#area').on('change',function(){
                var area_id = $(this).val();
                location.href= "{% url 'asset:cabinet' %}?area_id="+area_id
              })
            },
            getCorp:function(dom,_data){
                // var corp_id=0
                (_data.fields.belong)?corp_id=_data.fields.belong:corp_id=0;
                $.getJSON('/getCorp/', {'corp_id':corp_id}, function(val){
                    // success:func
                    if(val.status == 'success'){
                        var corp = JSON.parse(val.message)[0];
                        console.log(corp);
                        Klass.showToolTip(dom,_data,corp);
                    } else {
                        alert("get corp error");
                    }
                    })
            },
        }



      function ReqtoSer(){
        var keyword = $("#search_input").val();
        var area_id = $("#area").val();
        window.location.href="{% url 'asset:cabinet' %}?keyword=" + keyword + "&area_id="+ area_id;
        }


      $(function () {
            Klass.init();
            $("#search_btn").click(function(){
                ReqtoSer();
            })
            $("#search_input").keydown(function(e){
                if(e.keyCode==13){
                    ReqtoSer();
                }
            })
        })
    </script>



{% endblock %}
